<template>
	<view class="container">
		<!-- <form @submit="formSubmit" @reset="formReset"> -->
			<view class="list-cell b-b m-t"  hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">{{i18n.head_title}}</text>
				<avatar ref="showhead"
					selWidth="200px" selHeight="400upx" @upload="yqUpload" :avatarSrc="url" :lang="lang"
					avatarStyle="width: 100upx; height: 100upx; border-radius: 100%;">
				</avatar>
				<text class="cell-more yticon icon-you"></text>
			</view>
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">{{i18n.name_title}}</text>
				<input class="uni-user-input" v-bind:value="name" data-key="name" :placeholder="this.$lang.set_userinfo.input_name_title" @input="inputChange"/>
			</view>
			
			<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">{{i18n.phone_title}}</text>
				<input class="uni-user-input" v-bind:value="phone" data-key="phone" :placeholder="this.$lang.set_userinfo.input_phone_title" disabled/>
			</view>
			
			<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">{{i18n.email_title}}</text>
				<input class="uni-user-input" v-bind:value="email" data-key="email" :placeholder="this.$lang.set_userinfo.input_email_title" @input="inputChange"/>
			</view>
			
			<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">{{i18n.sex_title}}</text>
				<picker @change="bindPickerChange" :value="index" :range="sex_array" range-key="sex">
					<view class="uni-input">{{sex_array[index].sex}}</view>
				</picker>
				<text class="cell-more yticon icon-you"></text>
			</view>
			<view class="list-cell log-out-btn" @click="toSubmit">
				<text class="cell-tit">{{i18n.submit_title}}</text>
			</view>
		<!-- </form> -->
	</view>
</template>

<script>
	import request_async from '../../common/request_async.js';
	import upload from '../../common/upload.js';
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {
		mapState,
	    mapMutations  
	} from 'vuex';
	export default {
		components: {
			avatar
		},
		data() {
			return {
				url: "../../static/logo.png",
				lang: {},
				index: 0,
				name: '',
				phone: '',
				email: '',
				sex: 0,
				sex_array: [{val: 0, sex: this.$lang.set_userinfo.sex_unknow_title},{val: 1, sex: this.$lang.set_userinfo.sex_male_title},{val: 2, sex: this.$lang.set_userinfo.sex_female_title}],
			};
		},
		onLoad : function(options){
			this.name = this.userInfo.name;
			this.phone = this.userInfo.phone;
			this.email = this.userInfo.email;
			this.index = parseInt(this.userInfo.sex);
			this.sex   = this.userInfo.sex
			console.log(this.sex)
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: this.$lang.set_userinfo.title
			});
			this.url = this.$imghost + this.userInfo.headimg;
			this.lang = this.$lang.avatar;
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
			i18n() {
				return this.$lang.set_userinfo
			},
		},
		methods:{
			radioChange(evt){
				this.sex = evt.target.value;
				console.log(evt)
			},
			bindPickerChange(evt) {
				this.index = evt.detail.value;
				this.sex   = this.sex_array[this.index].val;
			},
			inputChange(e) {
				console.log(e)
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navTo(url){
				this.$api.msg(`跳转到${url}`);
			},
			async toSubmit(){
				const { name, phone,email, sex } = this;
				if(!name){
					this.$api.msg(this.$lang.set_userinfo.input_nick_title);
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(phone)){
					this.$api.msg(this.$lang.set_userinfo.input_rphone_title);
					return;
				}
				console.log({name: name, phone: phone, email: email, sex: sex})
				var res = await request_async({
					name: 'user.update',
					method: 'POST',
					data: {name: name, phone: phone, email: email, sex: sex}
				})
				console.log(res)
				if(res.code == 1){
					this.$api.msg(res.msg);
				}else{
					//更新用户信息
					this.$api.msg(this.$lang.set_userinfo.update_title);
					this.$store.dispatch("upuser", []);
				}
			},
			yqUpload(rsp){
				this.url = rsp.path; //更新头像方式一
				console.log(rsp);
				upload({
				    urlname: 'user.head.upload',
				    filePath: rsp.path,
				    name: 'headimg',
				    formData: {
				    },
				    success: (uploadFileRes) => {
						this.$store.dispatch("upuser", []);
				        console.log(uploadFileRes.data);
				    }
				});
			},
			uploadF(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
						console.log(chooseImageRes);
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef APP-PLUS  
						uni.compressImage({
						  src: tempFilePaths[0],
						  quality: 30,
						  success: res => {
						    console.log(res.tempFilePath)
							upload({
							    urlname: 'user.head.upload',
							    filePath: tempFilePaths[0],
							    name: 'headimg',
							    formData: {
							        // 'user': 'test'
							    },
							    success: (uploadFileRes) => {
									this.$store.dispatch("upuser", []);
							        console.log(uploadFileRes.data);
							    }
							});
						  }
						});//end of compressImage
						// #endif  
						// #ifndef APP-PLUS  
				        upload({
				            urlname: 'user.head.upload',
				            filePath: tempFilePaths[0],
				            name: 'headimg',
				            formData: {
				                // 'user': 'test'
				            },
				            success: (uploadFileRes) => {
								this.$store.dispatch("upuser", []);
				                console.log(uploadFileRes.data);
				            }
				        });
						// #endif  
				    }
				});
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.uni-user-input {
		height: 50rpx;
		line-height:50rpx;
		font-size:28rpx;
		background:#FFF;
		flex: 1;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
			
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-image {
			flex: 1;
			margin: 0rpx 0;
			width: 100rpx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
	
	.list{
		display: flex;
		align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		position: relative;
	}
	.wrapper{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.address-box{
		display: flex;
		align-items: center;
		.tag{
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
		.address{
			font-size: 30upx;
			color: $font-color-dark;
		}
	}
	.icon-bianji{
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}
</style>
